<template>
  <div class="content">
    <div class="title">
      <span class="iconfont icon-shop"></span>
      <span>优购生活馆</span>
    </div>
    <!-- 商品列表 -->
    <ul class="goods-list">
      <li class="goods-item"
          v-for="(item, index) in goodsList"
          :key="index">
        <span class="iconfont"
              :class="item.checked?'icon-checked':'icon-uncheck'"
              @click="toggleItem(item)"></span>
        <img :src="item.goods_small_logo"
             alt="">
        <div class="right">
          <p class="text-line2">{{item.goods_name}}</p>
          <div class="btm">
            <span class="price">￥<span>{{item.goods_price}}</span>.00</span>
            <div class="goods-num">
              <button @click="sub(item)"
                      :disabled="item.num===1">-</button>
              <span>{{item.num}}</span>
              <button @click="add(item)">+</button>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="account">
      <div class="select-all" @click="isAll =!isAll">
        <span class="iconfont"
              :class="isAll?'icon-checked':'icon-uncheck'"></span>
        <span>全选</span>
      </div>

      <div class="price">
        <p>合计:<span class="num">￥{{totalPrice}}.00</span></p>
        <p class="info">包含运费</p>
      </div>
      <div class="account-btn" @click="toPay">结算({{totalNum}})</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goodsList: []
    }
  },
  onShow () {
    // 每次请求数据前，清空goodsList
    this.goodsList = []
    this.getGoodsList()
    // 设置tab栏的徽标
    wx.setTabBarBadge({
      index: 2,
      // text是string类型
      text: Object.keys(this.$store.getters.getCart).length + ''
    })
  },
  computed: {
    isAll: {
      get () {
        // 所有商品都选中(every)，返回true
        return this.goodsList.every(v => {
          return v.checked
        })
      },
      set (status) {
        // 如果想真正改变计算属性，需要改变计算属性的依赖
        this.goodsList.forEach(v => {
          v.checked = status
        })
        // 更新state.cart每一个商品的状态
        this.$store.commit('updateCartStatus', status)
      }
    },
    totalNum () {
    // 选中的商品数量之和
      return this.goodsList.reduce((sum, v) => {
        return sum + (v.checked ? v.num : 0)
      }, 0)
    },
    totalPrice () {
      // 选中的商品数量*价格之和
      return this.goodsList.reduce((sum, v) => {
        return sum + (v.checked ? v.num * v.goods_price : 0)
      }, 0)
    }
  },
  methods: {
    sub (item) {
      item.num--
      this.$store.commit('updateItem', item)
    },
    add (item) {
      item.num++
      this.$store.commit('updateItem', item)
    },
    // 单个商品勾选和去勾选
    toggleItem (item) {
      item.checked = !item.checked
      this.$store.commit('updateItem', item)
    },
    toPay () {
      // 如果商品数量为0，提示
      if (!this.totalNum) {
        wx.showToast({
          title: '请选择需要支付的商品！',
          icon: 'none'
        })
        return
      }
      // 如果未登陆，跳转登录
      let token = wx.getStorageSync('token')
      if (!token) {
        wx.navigateTo({ url: '/pages/login/main' })
        //  这里是否需要return
        return
      }
      // 跳转支付
      wx.navigateTo({ url: '/pages/pay/main' })
    },
    async getGoodsList () {
      let cart = this.$store.getters.getCart || {}
      let ids = Object.keys(cart).join(',')
      // 如果ids不为空的话，就请求购物车列表
      if (ids) {
        let goodsList = await this.$request({
          url: '/api/public/v1/goods/goodslist',
          data: {
            goods_ids: ids
          }
        })
        // 合并购物车数据和购物商品列表数据
        goodsList.forEach(v => {
          v.num = cart[v.goods_id].num
          v.checked = cart[v.goods_id].checked
        })

        // 对data的改变，尽量一步到位
        this.goodsList = goodsList
      }
    }
  }
}
</script>

<style lang="less">
.iconfont {
  font-size: 44rpx;
}
.title {
  height: 88rpx;
  display: flex;
  align-items: center;
  .iconfont {
    color: #999;
    margin: 6rpx 12rpx 0 32rpx;
  }
}

.goods-item {
  height: 206rpx;
  background-color: #fff;
  border-top: 1rpx solid #ddd;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  .iconfont {
    color: #eb4450;
    margin: 0 30rpx;
  }
  img {
    width: 160rpx;
    height: 160rpx;
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20rpx 0 18rpx;
    .btm {
      display: flex;
      margin-top: 40rpx;
      justify-content: space-between;
      .price {
        color: #eb4450;
        > span {
          font-size: 24px;
        }
      }
      .goods-num {
        display: flex;
        align-items: center;
        button {
          width: 60rpx;
          height: 50rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 4rpx solid #666;
        }
        span {
          margin: 0 30rpx;
        }
      }
    }
  }
}
.goods-list {
  position: absolute;
  bottom: 98rpx;
  top: 88rpx;
  width: 100%;
  overflow: auto;
  padding-bottom: 60rpx;
  background-color: #f4f4f4;
}

.account {
  height: 98rpx;
  border-bottom: 1rpx solid #ddd;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  .iconfont {
    color: #eb4450;
    margin: 0 30rpx;
  }
  .account-btn {
    width: 230rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #eb4450;
  }
  .select-all {
    flex: 1;
  }
  .price {
    margin-right: 20rpx;
    .num {
      color: #eb4450;
    }
    .info {
      color: #999;
    }
  }
}
</style>